{{define "api_header"}}
	<nav class="navbar navbar-inverse">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
						data-target="#collapse-header" aria-expanded="true">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a id="home" class="navbar-brand" href="/">API首页</a>
			</div>

			<div class="navbar-form navbar-left">
				<div class="form-group">
					<input type="text" id="search" class="form-control" placeholder="Search">
				</div>
				<button type="submit" id="submit" class="btn btn-default">Submit</button>
			</div>

			<div class="collapse navbar-collapse" id="collapse-header">
				<ul class="nav navbar-nav">
					<li id="api"><a href="/api/view/api">魔兽世界 API</a></li>
					<li id="event"><a href="/api/view/event">游戏事件 API</a></li>
					<li id="macro"><a href="/api/view/macro">宏命令列表</a></li>
					<li id="widget"><a href="/api/view/widget">部件UI API</a></li>
					<li id="widgetHandler"><a href="/api/view/widgetHandler">部件处理 API</a></li>
				</ul>
			</div>
		</div>
	</nav>
	<script>
		$("#" + api).addClass("active");
		if (api == "home") {
			$("#" + api).css("color", "white");
		}
		$(".collapsed").click(function() {
			var tag = $(this).attr("data-target");
			$(".navbar-nav").css("height", "100px");
			$(tag).toggle();
		});
		$("#submit").click(function() {
			var s = $("#search").val();
			window.location.href = "/api/view/search_list?s=" + s;
		});
		$('#search').bind('keydown', function(event) {
			if (event.keyCode == "13") {
				var s = $(this).val();
				window.location.href = "/api/view/search_list?s=" + s;
			}
		});
	</script>
{{end}}